﻿<ng-template #content>
    <div nz-row nzGutter="12" class="x-table-settings-dialog">
        <div nz-col nzXs="24" nzSm="8" nzMd="8" nzLg="8" nzXl="6" nzXXl="6">
            <nz-card [nzTitle]="'util.optionalColumns' | i18n">
                <div>
                    <nz-list>
                        <label nz-checkbox [(ngModel)]="allChecked" [nzIndeterminate]="indeterminate" (ngModelChange)="handleAllChecked()">
                            {{ allChecked ? ('util.deselectAll' | i18n) : ('util.selectAll' | i18n) }}
                        </label>
                        <nz-divider></nz-divider>
                        <div style="min-height: 200px; overflow-y: scroll" [style.maxHeight]="selfListMaxHeight">
                            <ng-container *ngFor="let item of initColumns">
                                <nz-checkbox-wrapper style="width: 100%;">
                                    <label nz-checkbox [(ngModel)]="item.enabled" (ngModelChange)="handleChecked(item)" style="line-height:36px">
                                        {{ item.title | i18n }}
                                    </label>
                                </nz-checkbox-wrapper>
                            </ng-container>
                        </div>
                    </nz-list>
                </div>
            </nz-card>
        </div>
        <div nz-col nzXs="24" nzSm="16" nzMd="16" nzLg="16" nzXl="18" nzXXl="18">
            <nz-card *ngIf="!isHideTableConfig" [nzTitle]="'util.tableSettings'|i18n" class="card-table-config">
                <form nz-form>
                    <div nz-row>
                        <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="24" nzXl="12" nzXXl="12">
                            <nz-form-item>
                                <nz-form-label [nzSpan]="8">{{'util.tableSize'|i18n}}</nz-form-label>
                                <nz-form-control [nzSpan]="16">
                                    <nz-segmented name="tableSize" x-segmented-extend #x_tableSize="xSegmentedExtend"
                                                  [data]="tableSizeOptions" [(value)]="info.size"
                                                  [nzOptions]="x_tableSize.options" [(ngModel)]="x_tableSize.index"
                                                  (nzValueChange)="x_tableSize.handleValueChange($event)">
                                    </nz-segmented>
                                </nz-form-control>
                            </nz-form-item>
                        </div>
                        <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="24" nzXl="12" nzXXl="12">
                            <nz-form-item>
                                <nz-form-label [nzSpan]="8">{{'util.tableBorder'|i18n}}</nz-form-label>
                                <nz-form-control [nzSpan]="16">
                                    <nz-switch name="tableBordered" [(ngModel)]="info.bordered"></nz-switch>
                                </nz-form-control>
                            </nz-form-item>
                        </div>
                    </div>
                    <div nz-row>
                        <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="24" nzXl="12" nzXXl="12">
                            <nz-form-item>
                                <nz-form-label [nzSpan]="8">{{'util.scrollWidth'|i18n}}</nz-form-label>
                                <nz-form-control [nzSpan]="16">
                                    <input nz-input name="tableWidth" [(ngModel)]="info.width" />
                                </nz-form-control>
                            </nz-form-item>
                        </div>
                        <div nz-col nzXs="24" nzSm="24" nzMd="24" nzLg="24" nzXl="12" nzXXl="12">
                            <nz-form-item>
                                <nz-form-label [nzSpan]="8">{{'util.scrollHeight'|i18n}}</nz-form-label>
                                <nz-form-control [nzSpan]="16">
                                    <input nz-input name="tableHeight" [(ngModel)]="info.height" />
                                </nz-form-control>
                            </nz-form-item>
                        </div>
                    </div>
                </form>
            </nz-card>
            <nz-card [nzTitle]="'util.selectedColumns'|i18n">
                <nz-table #tb_column_settings [nzShowPagination]="false" nzSize="small"
                          [nzScroll]="getSelfScroll()"
                          [nzData]="info.columns">
                    <thead>
                        <tr>
                            <th nzWidth="130px" [nzLeft]="getSelfLeft('0px')" titleAlign="center">{{'util.action'|i18n}}</th>
                            <th nzWidth="50px" [nzLeft]="getSelfLeft('130px')" titleAlign="center">{{'util.lineNumber'|i18n}}</th>
                            <th nzWidth="200px" [nzLeft]="getSelfLeft('180px')" titleAlign="center">{{'util.column'|i18n}}</th>
                            <th nzWidth="80px" titleAlign="center">{{'util.columnWidth'|i18n}}</th>
                            <th nzWidth="100px" *ngIf="enableFixedColumn">{{'util.fixToLeft'|i18n}}</th>
                            <th nzWidth="100px" *ngIf="enableFixedColumn">{{'util.fixToRight'|i18n}}</th>
                            <th nzWidth="130px">
                                {{'util.headerAlignment'|i18n}}
                                <nz-filter-trigger [(nzVisible)]="isTitleAlignVisible" [nzDropdownMenu]="menuTitleAlign">
                                    <span nz-icon nzType="setting" style="color: rgba(0,0,0,0.85)"></span>
                                </nz-filter-trigger>
                            </th>
                            <th nzWidth="130px">
                                {{'util.contentAlignment'|i18n}}
                                <nz-filter-trigger [(nzVisible)]="isAlignVisible" [nzDropdownMenu]="menuAlign">
                                    <span nz-icon nzType="setting" style="color: rgba(0,0,0,0.85)"></span>
                                </nz-filter-trigger>
                            </th>
                            <th nzWidth="100px">
                                {{'util.ellipsisDisplay'|i18n}}
                                <nz-filter-trigger [(nzVisible)]="isEllipsisVisible" [nzDropdownMenu]="menuEllipsis">
                                    <span nz-icon nzType="setting" style="color: rgba(0,0,0,0.85)"></span>
                                </nz-filter-trigger>
                            </th>
                        </tr>
                    </thead>
                    <tbody cdkDropList (cdkDropListDropped)="handleDropped($event)">
                        <ng-container *ngFor="let column of info.columns;index as index">
                            <tr *ngIf="column.enabled">
                                <td [nzLeft]="getSelfLeft('0px')" nzAlign="center">
                                    <a (click)="removeColumn(column)" class="ant-btn-dangerous">
                                        {{'util.hide'|i18n}}
                                    </a>
                                    <ng-container *ngIf="editId === column.title">
                                        <nz-divider nzType="vertical"></nz-divider>
                                        <a (click)="stopEdit()">{{'util.unedit'|i18n}}</a>
                                    </ng-container>
                                </td>
                                <td [nzLeft]="getSelfLeft('130px')">{{column.line}}</td>
                                <td [nzLeft]="getSelfLeft('180px')" [ngStyle]="{cursor:isDragDisabled(index)? '':'move'}" cdkDrag [cdkDragDisabled]="isDragDisabled(index)" [cdkDragData]="column">
                                    <i nz-icon *ngIf="!isDragDisabled(index)" style="font-size:16px;margin-right:10px" nzTheme="outline" nzType="holder"></i>
                                    <span>{{ column.title | i18n }}</span>
                                </td>
                                <td (click)="startEdit(column.title)">
                                    <div *ngIf="editId !== column.title">
                                        {{ column.width }}
                                    </div>
                                    <input *ngIf="editId === column.title" type="text" nz-input [(ngModel)]="column.width"
                                           (blur)="stopEdit()" (ngModelChange)="handleWidthChange()" />
                                </td>
                                <td *ngIf="enableFixedColumn">
                                    <nz-switch [(ngModel)]="column.left" [nzDisabled]="column.isDisableLeft" (ngModelChange)="handleFixedColumn(column)"></nz-switch>
                                </td>
                                <td *ngIf="enableFixedColumn">
                                    <nz-switch [(ngModel)]="column.right" [nzDisabled]="column.isDisableRight" (ngModelChange)="handleFixedColumn(column)"></nz-switch>
                                </td>
                                <td>
                                    <nz-segmented name="columnTitleAlign" x-segmented-extend #x_columnTitleAlign="xSegmentedExtend"
                                                  [data]="tableAlignOptions" [(value)]="column.titleAlign"
                                                  [nzOptions]="x_columnTitleAlign.options" [(ngModel)]="x_columnTitleAlign.index"
                                                  (nzValueChange)="x_columnTitleAlign.handleValueChange($event)">
                                    </nz-segmented>
                                </td>
                                <td>
                                    <nz-segmented name="columnAlign" x-segmented-extend #x_columnAlign="xSegmentedExtend"
                                                  [data]="tableAlignOptions" [(value)]="column.align"
                                                  [nzOptions]="x_columnAlign.options" [(ngModel)]="x_columnAlign.index"
                                                  (nzValueChange)="x_columnAlign.handleValueChange($event)">
                                    </nz-segmented>
                                </td>
                                <td>
                                    <nz-switch [(ngModel)]="column.ellipsis"></nz-switch>
                                </td>
                            </tr>
                        </ng-container>
                    </tbody>
                </nz-table>
                <nz-dropdown-menu #menuTitleAlign="nzDropdownMenu">
                    <div class="ant-table-filter-dropdown" style="min-width:0">
                        <nz-segmented name="tableTitleAlign" x-segmented-extend #x_tableTitleAlign="xSegmentedExtend"
                                      [data]="tableAlignOptions" [nzOptions]="x_tableTitleAlign.options"
                                      (nzValueChange)="handleTitleAlignChange($event)">
                        </nz-segmented>
                    </div>
                </nz-dropdown-menu>
                <nz-dropdown-menu #menuAlign="nzDropdownMenu">
                    <div class="ant-table-filter-dropdown" style="min-width:0">
                        <nz-segmented name="tableAlign" x-segmented-extend #x_tableAlign="xSegmentedExtend"
                                      [data]="tableAlignOptions" [nzOptions]="x_tableAlign.options"
                                      (nzValueChange)="handleAlignChange($event)">
                        </nz-segmented>
                    </div>
                </nz-dropdown-menu>
                <nz-dropdown-menu #menuEllipsis="nzDropdownMenu">
                    <div class="ant-table-filter-dropdown" style="min-width:0">
                        <nz-switch [(ngModel)]="ellipsisValue" (ngModelChange)="handleEllipsisChange($event)" nzSize="small"></nz-switch>
                    </div>
                </nz-dropdown-menu>
            </nz-card>
        </div>
    </div>
</ng-template>
<ng-template #footer>
    <button nz-button nzType="default" (click)="handleCancel()">
        {{'util.cancel'|i18n}}
    </button>
    <button nz-button nzType="default" (click)="handleInit()">
        {{'util.init'|i18n}}
    </button>
    <button nz-button nzType="default" (click)="handleReset()">
        {{'util.reset'|i18n}}
    </button>
    <button nz-button nzType="primary" (click)="handleOk()" [nzLoading]="loading">
        {{'util.ok'|i18n}}
    </button>
</ng-template>
